<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="valuation" @tab-click="getList(1)">
          <el-tab-pane :label="item.name" :name="item.type.toString()" v-for="(item,index) in headeNum" :key="index"/>
        </el-tabs>
        <div class="container">
          <el-form inline size="small" :model="workFrom" ref="workFrom" :label-position="labelPosition"  label-width="110px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-col v-bind="grid">
                  <el-form-item label="零活搜索：">
                    <el-input v-model="workFrom.name" placeholder="请输入零活名称" clearable  class="selWidth"/>
                  </el-form-item>
                </el-col>
              </el-col>
              <template v-if="collapse">
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item label="是否企业发布：">
                      <el-select v-model="workFrom.is_enterprise" placeholder="是否企业发布" clearable class="selWidth">
                        <el-option label="全部" :value="0"/>
                        <el-option label="是" :value="1"/>
                        <el-option label="否" :value="2"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
              </template>
              <el-col  :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right workFrom">
                <el-form-item>
                  <el-button label="default" class="" icon="el-icon-search" size="mini" type="primary"  @click="workSearchs">搜索</el-button>
                  <el-button class="ResetSearch mr10" @click="reset('workFrom')" icon="el-icon-refresh" size="mini">重置</el-button>
                  <a class="ivu-ml-8" @click="collapse = !collapse">
                    <template v-if="!collapse">
                      展开 <i class="el-icon-arrow-down"></i>
                    </template>
                    <template v-else>
                      收起 <i class="el-icon-arrow-up"></i>
                    </template>
                  </a>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" @click="handlerOpenEdit(0)" type="primary" v-hasPermi="['admin:work:insert']">添加零活</el-button>
        </div>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        class="el-table"
        :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="id"
          label="ID"
          min-width="40"
        />
        <el-table-column
          label="名称"
          min-width="120"
          prop="name"
        />
        <el-table-column
          label="工种类型"
          min-width="80"
          prop="type_text"
        />
        <el-table-column
          label="开工时间"
          min-width="100"
          prop="start_time_text"
        />
        <el-table-column
          label="用工人数"
          min-width="80"
          prop="population"
        />
        <el-table-column
          label="用工价格"
          min-width="100"
        >
          <template slot-scope="scope">
            <!--            <p>计价方式：{{scope.row.valuation_text | filterEmpty}}</p>-->
            <p>单价：{{scope.row.price}} {{scope.row.price_text}}</p>
            <p>预估工期：{{scope.row.duration}} {{scope.row.unit_text}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="工作地址"
          min-width="120"
          prop="address"
        />
<!--        <el-table-column-->
<!--          label="是否企业发布"-->
<!--          min-width="120"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row.is_enterprise | isEnterpriseFilter}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="发布者"
          min-width="120"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.user">
              <span>{{scope.row.user.name | filterEmpty  }} | {{scope.row.user.phone_number | filterEmpty  }}</span>
            </template>
            <template v-else>
              <span>-</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="是否公开"
          min-width="80"
        >
          <template slot-scope="scope">
            <span :style="scope.row.is_show===1?'color:#91cc75':''">{{scope.row.is_show | isShowFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="公开时间"
          min-width="100"
        >
          <template slot-scope="scope">
            <span>{{scope.row.show_time_text | filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="80"
        >
          <template slot-scope="scope">
            <span>{{scope.row.process_status_text | filterEmpty}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.is_self!==1">
              <el-button type="success" @click="onWorkDetails(scope.row.id)" size="mini" v-hasPermi="['admin:work:info']" style="margin-right:10px;" >详情</el-button>
            </template>
            <template v-else>
              <template v-if="scope.row.is_show === 1">
                <el-button type="success" @click="onWorkDetails(scope.row.id)" size="mini" v-hasPermi="['admin:work:info']" style="margin-right:10px;" >详情</el-button>
              </template>
              <template v-else>
                <el-button type="primary" size="mini" @click="handlerOpenEdit(1,scope.row)" v-hasPermi="['admin:work:info']">编辑</el-button>
                <el-button type="danger" size="mini" @click="handlerOpenDel(scope.row)" v-hasPermi="['admin:work:delete']" class="mr10">删除</el-button>
              </template>
            </template>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
<!--                <el-dropdown-item @click.native="onWorkDetails(scope.row.id)" v-if="checkPermi(['admin:work:info'])">零工详情</el-dropdown-item>-->
                <el-dropdown-item @click.native="editUser(scope.row)" v-if="checkPermi(['admin:work:save'])">零活改价</el-dropdown-item>
                <el-dropdown-item @click.native="editAssign(scope.row)" v-if="checkPermi(['admin:work:assign'])">{{scope.row.process_status===2?'零工评价':'零工派遣'}}</el-dropdown-item>
                <!-- 招工中、已过期的才能延期 -->
                <el-dropdown-item @click.native="editDelay(scope.row)" v-if="checkPermi(['admin:work:delay'])">零活延期</el-dropdown-item>
                <el-dropdown-item @click.native="editFinish(scope.row)" v-if="checkPermi(['admin:work:finish'])">零活完工</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[15, 30, 45, 60]"
          :page-size="workFrom.limit"
          :current-page="workFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!--详情-->
    <details-from ref="workDetail" :id="id"/>
    <!--改价-->
    <el-dialog
      title="零活改价"
      :visible.sync="visible"
      width="600px"
    >
      <edit-from v-if="visible" :id="id" :editData="editData" @resetForm="resetForm"></edit-from>
    </el-dialog>
    <!--延期-->
    <el-dialog
      title="零活延期"
      :visible.sync="visibleDelay"
      width="600px"
    >
      <delay-from v-if="visibleDelay" :id="id" :time="start_time" @resetDelayForm="resetDelayForm"></delay-from>
    </el-dialog>
    <!--派遣-->
    <el-dialog
      :title="process_status===2?'零工评价':'零工派遣'"
      :visible.sync="visibleAssign"
      width="1000px"
    >
      <assign-from v-if="visibleAssign" :id="id" :requireNum="population" :processStatus="process_status" @resetAssignForm="resetAssignForm"></assign-from>
    </el-dialog>
    <!--完工-->
    <el-dialog
      title="零活完工"
      :visible.sync="visibleFinish"
      width="600px"
    >
      <finish-from v-if="visibleFinish" :id="id" :editData="editData" @resetFinishForm="resetFinishForm"></finish-from>
    </el-dialog>
    <!--新增/编辑-->
    <el-dialog
      :visible.sync="editDialogConfig.visible"
      :title="editDialogConfig.isCreate === 0? '创建':'编辑'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
    >
      <edit
        v-if="editDialogConfig.visible"
        :is-create="editDialogConfig.isCreate"
        :edit-data="editDialogConfig.editData"
        :all-tree-list="treeList"
        :all-valuation-list="valuationList"
        @hideEditDialog="hideEditDialog"
      />
    </el-dialog>
    <!--        :all-role-list="roleList"-->
    <!--        :all-department-list="departmentList"-->
  </div>
</template>

<script>
import { workListApi,robWorkApi,valuationList,doDel} from '@/api/workApi'
import editFrom from './edit'
import delayFrom from './editDelay'
import assignFrom from './editAssign'
import detailsFrom from './workDetail'
import finishFrom from './editFinish'
import edit from './insert'
import Cookies from 'js-cookie'
import { checkAdminRole, checkPermi } from '@/utils/permission' // 权限判断函数
import {Debounce} from '@/utils/validate'
import * as backupsApi from '@/api/backups'
import * as categoryApi from "@/api/categoryApi";
import {treeCategroyWorkType} from "@/api/categoryApi";
import * as selfUtil from "@/utils/ZBKJIutil";
import * as departmentApi from "@/api/department";
export default {
  name: 'WorkMy',
  components:{edit, editFrom, detailsFrom, delayFrom, assignFrom, finishFrom },
  filters: {
    isEnterpriseFilter(status) {
      const statusMap = {
        0: '-',
        1: '是',
        2: '否',
      }
      return statusMap[status]
    },
    isShowFilter(status) {
      const statusMap = {
        0: '-',
        1: '是',
        2: '否',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      loadingBtn: false,
      visible: false,//改价
      visibleDelay: false,//延期
      visibleAssign: false,//派遣
      visibleFinish: false,//完工
      labelPosition:'right',
      collapse: false,
      props: {
        children: 'child',
        label: 'name',
        value: 'name',
        emitPath: false
      },
      headeNum: [
        { 'type': '', 'name': '全部零活' },
        { 'type': '1', 'name': '短期工' },
        { 'type': '2', 'name': '钟点工' },
        //{ 'type': '3', 'name': '计件工' },
      ],
      listLoading: true,
      tableData: {
        data: [],
        total: 0
      },
      valuation: '',//顶部计价方式筛选
      workFrom: {
        name: '',
        page: 1,
        limit: 15,
      },
      grid: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },

      loading: false,
      id: null,

      editData: {},
      start_time:null,
      population:0,
      process_status:0,

      editDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      treeList: [],
      valuationList:[],
    }
  },
  activated(){
    this.workFrom.name = '';
    this.workFrom.is_enterprise = 0;
    this.valuation = '0';
    this.getList(1);
  },
  mounted() {
    this.getList()
    this.handlerGetTreeList()
    this.handlerGetValuationList()
  },
  methods: {
    checkPermi,
    tableRowClassName({row, rowIndex}) {
      console.log(row.is_self)
      if (row.is_self === 1) {
        return 'self-row';
      }
      return '';
    },

    reset(formName) {
      this.workFrom = {
        name: '',
        is_enterprise: 0,
        page: 1,
        limit: 15,
      }
      this.getList()
    },

    //改价
    editUser(editData) {
      this.id = editData.id
      this.editData = editData
      this.visible = true
    },
    resetForm(){
      this.visible = false;
    },

    //延期
    editDelay(editData) {
      this.id = editData.id
      this.start_time = editData.start_time_text
      this.visibleDelay = true
    },
    resetDelayForm(){
      this.visibleDelay = false;
    },

    //派遣
    editAssign(editData) {
      this.id = editData.id
      this.population = editData.population
      this.process_status = editData.process_status
      this.visibleAssign = true
    },
    resetAssignForm(){
      this.visibleAssign = false;
    },

    //完工
    editFinish(editData) {
      this.id = editData.id
      this.editData = editData
      this.visibleFinish = true
    },
    resetFinishForm(){
      this.visibleFinish = false;
    },

    // 详情
    onWorkDetails(id) {
      this.id = id
      this.$refs.workDetail.getDetail(id)
      this.$refs.workDetail.dialogVisible = true
    },
    //删除
    handlerOpenDel(rowData) {
      this.$confirm('确认删除当前数据').then(() => {
        const _pram = { id: rowData.id}
        doDel(_pram).then(data => {
          this.$message.success('删除数据成功')
          this.getList()
        })
      })
    },

    // 搜索
    workSearchs () {
      this.workFrom.page = 1;
      this.getList();
    },

    // 列表
    getList(num) {
      this.listLoading = true
      this.workFrom.page = num ? num : this.workFrom.page;
      this.workFrom.valuation = this.valuation
      if(this.valuation == 0) this.workFrom.valuation =''
      this.workFrom.department = 1 //当前登录部门
      workListApi(this.workFrom).then(res => {
        this.tableData.data = res.list
        this.tableData.total = res.count
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },

    pageChange(page) {
      this.workFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.workFrom.limit = val
      this.getList()
    },

    handlerOpenEdit(isCreate, editDate) {
      this.editDialogConfig.editData = editDate
      this.editDialogConfig.isCreate = isCreate
      this.editDialogConfig.visible = true
    },
    hideEditDialog() {
      this.editDialogConfig.visible = false
      this.getList()
    },

    //计价方式
    handlerGetValuationList() {
      valuationList().then(data => {
        this.valuationList = Object.values(data)
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    //工种树
    handlerGetTreeList() {
      categoryApi.treeCategroyWorkType().then(data => {
        this.treeList = this.handleAddArrt(data)
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    handleAddArrt(treeData) {
      const _result = selfUtil.addTreeListLabel(treeData)
      return _result
    },
  }
}
</script>

<style scoped lang="scss">
/*.timeBox{*/
/*width: 100%;*/
/*::v-deep.el-form-item__content{*/
/*width: 87% !important;*/
/*}*/
/*}*/
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.text-right{
  text-align: right;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}
.selWidth{
  width: 100% !important;
}
.seachTiele{
  line-height: 30px;
}
.container{
  min-width: 821px;
  ::v-deep.el-form-item{
    width: 100%;
  }
  ::v-deep.el-form-item__content{
    width: 72%;
  }
}
.ivu-ml-8{
  font-size: 12px;
  color: #1682e6;
}
.btn_bt{
  border-top:1px dashed #ccc;
  padding-top: 20px;
}
.relative{
  position: relative;
}

::v-deep.el-table .self-row {
  background:oldlace;
}
</style>
